<template>
  <body>
    <div class="mian_container">
      <img src="../../assets/背景图.png" width="100%" height="100%" />
      <!-- 头部区域 -->
      <div class="header_box">
        <div>
          <img src="../../assets/城市学院logo.png" alt="" />
          <img class="p1" src="../../assets/实验室logo.png" alt="" />
        </div>

        <el-row :gutter="20">
          <el-col :span="25"
            ><el-input>
              <el-button
                slot="append"
                icon="el-icon-search"
                type="primary"
              ></el-button> </el-input
          ></el-col>
        </el-row>
      </div>
      <!-- 导航栏区域 -->
      <div class="shortcut_box">
        <div class="short2_box">
          <ul>
            <li><a class="active" href="#hosthome" @click="tohosthome">首页</a></li>
            <li><a href="#news">中心概况</a></li>
            <li><a href="#news" @click="secondaryhosthome">新闻公告</a></li>
            <li><a href="#about">教学资源</a></li>
            <li><a href="#about">成果展示</a></li>
            <li><a href="#about">实验平台</a></li>
            <li><a href="#about">综合服务</a></li>
            <li><a href="#about">资源在线申请</a></li>
            <li><a href="#about">教学综合信息系统</a></li>
          </ul>
        </div>
      </div>
      <div class="bread">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/hosthome' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><a href="/secondaryhosthome">新闻公告</a></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <!-- 内容主体区域 -->
      <div class="function_box">
        <div class="function_container">
          <!-- 实验室介绍模块 -->
          <div class="lab_box">
            <span style="font-family:'宋体">实验室介绍</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="getMoreNotice()"
              >More >></el-button
            >
          </div>
          <!-- 实验室平台模块 -->
          <div class="LaboratoryPlatform_box">
            <span style="font-family:'宋体">实验室平台</span>
            <img src="../../assets/网络U盘.png" alt="" />
            <img src="../../assets/PAT测评系统.png" alt="" />
            <img src="../../assets/教学信息综合管理.png" alt="" />
            <img src="../../assets/上机查询系统.png" alt="" />
            <img src="../../assets/资源申请.png" alt="" />
            <img src="../../assets/设备管理.png" alt="" />
            <img src="../../assets/AOA评测系统.png" alt="" />
            <img src="../../assets/SQL判题系统.png" alt="" />
            <img src="../../assets/格式检查系统.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      carouselIMG: [
        require("../../assets/zucc_01.jpg"),
        require("../../assets/logo.png"),
      ],
      //这是登录表单的数据绑定对象
      loginForm: {
        account: "31801100",
        password: "123456",
      },
      loginFormRules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 50,
            message: "长度在 6 到 50 个字符hhhhhhh",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("/v1/api/users/login", {
          account: this.loginForm.account,
          password: md5(this.loginForm.password),
        });
        if (res.msg != "success") return this.$message.error("登录失败");
        // if(res.status != 200) return console.log('登录失败');
        // console.log('登录成功');
        this.$message.success("登录成功");
        // console.log(res);
        window.sessionStorage.setItem("token", res.data.id);
        this.$router.push({
          name: "Home",
          params: {
            // 后期修改为roleType
            roleType: res.data.roleType,
          },
        });
      });
    },
    tohosthome() {
      this.$router.push("/hosthome");
    },
    tonews() {
      this.$router.push("/secondaryhosthome");
    },
  },
};
</script>

<style lang="less" scoped>
//less 支持less语法格式
//scoped当前组件内生效，去掉全局生效
.mian_container {
  // background-color: #e8f8fa;
  background-color: rgb(230, 180, 180);
  height: 2000px;
}
// 头部
.header_box {
  width: 1020px;
  height: 60px;
  // background-color: rgb(158, 19, 19);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 25px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 35px;
      letter-spacing: 5px;
    }
    .p1 {
      margin-left: 20px;
    }
  }
}
//导航栏
.shortcut_box {
  width: 100%;
  height: 60px;
  background-color: #0e4c92;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 123px;
  transform: translate(-50%, -50%);
}
.short2_box {
  width: 1020px;
  height: 60px;
  // background-color: #d3a033;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
}
.shortcut_box ul {
  list-style-type: none;
  margin: 5px;
  padding-top: 0px;
  overflow: hidden;
  // background-color: #0e4c92;
  padding-inline-start: 0px;
}

.shortcut_box li {
  float: left;
}

.shortcut_box li a {
  display: flex;
  color: white;
  // active-text-color: #fff;
  text-align: center;
  padding: 15px 20.5px;
  text-decoration: none;
}

.shortcut_box li a:hover {
  background-color: #106ab5;
}

// 主体功能
.function_box {
  width: 1020px;
  // height: 1750px;
  height: 1700px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 1060px;
  transform: translate(-50%, -50%);
}
//主体区域背景布局颜色
.function_container {
  background-color: #c0e7f3;
  // background-color: rgb(255, 255, 255);
  height: 100%;
}

.bread {
  // background-color: rgb(163, 19, 19);
  width: 1020px;
  height: 60px;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 183px;
  transform: translate(-50%, -50%);
  .el-breadcrumb {
    // margin-bottom: 20px;
    padding-left: 10px;
    padding-top: 20px;
    font-size: 15px;
  }
  // display: flex;
  // margin: 5px;
}

// 实验室介绍模块
.lab_box {
  width: 250px;
  height: 440px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 500px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
}
//实验室平台模块
.LaboratoryPlatform_box {
  width: 250px;
  height: 440px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 135px;
  top: 950px;
  transform: translate(-50%, -50%);
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 20px;
  }
  > img {
    width: 70px;
    height: 70px;
  }
}
</style>
